<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('materials.todaysRecommendedDosage')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text"
							style="width:300rpx">{{ $t('distributedEnter.materialName') }}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.materialName"
								:placeholder="$t('distributedEnter.materialName')" />
						</view>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="padding-right: 40rpx;color:black">{{
							$t('distributedEnter.barcodeScan') }}：</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.barcode" type="search"
							@confirm="confirm" @iconClick="iconClick" :placeholder="$t('translationImage.pleaseScanTray')">
						</uni-easyinput>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{ $t('translationImage.process') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow:visible;">
							<superweiCombox style="text-align:right;" :candidates="data.selectList"
								:placeholder="$t('translationImage.process')" :isJSON="true" keyName="name" @select="select"
								v-model="data.processCode" :defaultValue="$t('smashRemoval.all')">
							</superweiCombox>
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{ $t('distributedEnter.date') }}：</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{ data.chooseTime[0] }}</text> {{ data.chooseTime[1] ? '-' : '' }}
								<text>{{ data.chooseTime[1] }}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center" style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text
									class="gui-block gui-color-black gui-button-text-mini gui-icons">{{ $t('distributedEnter.reset') }}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text
									class="gui-block gui-color-white gui-button-text-mini gui-icons">{{ $t('distributedEnter.search') }}</text>
							</button>
						</view>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view class="record-card" v-for="(item, index) in data.arrList" :key="`${item.barcode}` + `${index}`">
						<view class="card-mini-head">
							<view class="title-line"></view>
							<text>{{ $t('translationImage.serialNumber') }}：{{ index + 1 }}</text>
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{
								item.materialCode
							}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{
								item.materialName
							}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{
								item.specification || ''
							}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ item.unit }}
						</view>
						<view class="custom-card-itemOne" style="color: red;">
							<text class="item-info-title" style="color: red;">{{ $t('materials.todaysRecommendedDosage')
							}}：</text>{{Number(item.standardDosage).toFixed(4)}}
						</view>
						<view class="custom-card-itemOne " style="color: red;">
							<text class="item-info-title " style="color: red;">{{ $t('materials.todaysRecommendedBarCode') }}：</text>
							{{ (Number(item.barcodeNum).toFixed(4)) }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('translationImage.process')
							}}：</text>{{ item.processCode }}
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.barcodeList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime">
			</calendarCustom>
		</template>
	</gui-page>
</template>

<script setup>
import { navigate } from '@/utils/routerSkip.js';
import calendarCustom from '@/components/calendarCustom';
import { useStore } from "vuex";
import superweiCombox from '@/components/superweiCombox';
import { ref, reactive, onMounted, watch, computed, toRaw } from 'vue';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_DEL, OPERATION_LOOK, OPERATION_SCAN } from '@/constant/index.js'
import { pickingApplication, pickingApplication1, selectWmsBarcodeInfoWms } from '@/api/api.js'
import { useI18n } from 'vue-i18n';
import pdaScan from '@/hooks/pdaScan.js'


components: {
	superweiCombox,
		calendarCustom
}
const { t } = useI18n();
const { scan } = pdaScan()

let store = useStore();

let calendarCustomRef = ref(null);
let data = reactive({
	barcodeList: [], //条码数组
	arrList: [],
	processCode: '',
	selectId: null,
	selectList: [{
		id: '5',
		name: t('smashRemoval.all')
	}, {
		id: '1',
		name: 'JC'
	}, {
		id: '2',
		name: 'DR'
	}, {
		id: '3',
		name: "TH"
	}, {
		id: '4',
		name: "PE"
	}],
	showPull: true,
	materialCode: '',
	list: [],
	rows: 20,
	page: 1,
	noticeHooks: false,
	barcode: '',
	chooseTime: [],
})
components: {
	superweiCombox
}
onMounted(() => {
	try {
		let inputParameter = '无'
		let returnParameter = JSON.stringify(data.barcodeList)
		let operationPicture = '今日推荐用量'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无', //返回状态
			errorMessage: '无', //错误信息
			isPass: 'Y', //是否成功 Y N
			operationType: OPERATION_LOOK
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) { }
	picking()
	uni.$on('scancodedate', (item) => {
		console.log('获取到的code：' + item.code)
		getCode(item.code, 'pda')
	})
})

// 用户点击扫码图标
const iconClick = async (type) => {
	if (type === 'suffix') {
		let code = await scan()
		getCode(code, 'scan')
	}
}
// 用户点击搜索
const confirm = () => {
	getCode(data.barcode, 'keydown')
}
// 获取code
const getCode = (code, type) => {
	// data.scanValue = code
	let parmes = {
		// isSp: 0,
		// warehouseCode: data.outWarehouseCode,
		barcode: code,
		selectType: 'splitBarcode',
	}
	selectWmsBarcodeInfoWms(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '今日推荐用量'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_SCAN
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		console.log(res)
		if (res.status == 200) {
			data.materialName = res.data.materialName
			data.materialCode = res.data.materialCode
			search()
		} else {
			data.scanInfo = undefined
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}

const picking = () => {
	let parmes={
		page: data.page,
		rows: data.rows,
		dnDateStart: data.chooseTime[0] || null,
		dnDateEnd: data.chooseTime[1] ? data.chooseTime[1] : (data.chooseTime[0] || null),
		materialCode: data.materialCode,
		materialName: data.materialName,
		processCode: data.processCode
	}
	pickingApplication1(parmes).then(res => {
		// console.log(res)
		if (res.status == 200) {
			data.noticeHooks = false
			const rows = res.data.rows;
			if (data.page == 1) {
				if (res.data.rows.length == 0) {
					data.noticeHooks = true
				}
				data.barcodeList = rows
				data.arrList = data.barcodeList
			} else {
				let arr = res.data.rows
				data.barcodeList = [...data.barcodeList, ...arr]
				data.arrList = data.barcodeList
			}
			data.noticeHooks = data.barcodeList.length >= res.data.total
		} else {
			uni.showToast({
				title: res.message,
				icon: "none"
			});
		}
	})
}

// 下拉加载
const scrolltolowerFn = () => {
	console.log(data.noticeHooks)
	if (!data.noticeHooks) {
		data.page++
		data.isLoading = true;
		picking()
	}
}

const select = (e) => {
	data.selectId = e.id;
}

const  search = async() => {
	let parmes={
		page: data.page,
		rows: data.rows,
		dnDateStart: data.chooseTime[0] || null,
		dnDateEnd: data.chooseTime[1] ? data.chooseTime[1] : (data.chooseTime[0] || null),
		materialCode: data.materialCode,
		materialName: data.materialName,
		processCode: data.processCode
	}
	await pickingApplication1(parmes).then(res => {
		// console.log(res)
		if (res.status == 200) {
			data.noticeHooks = false
			const rows = res.data.rows;
			if (data.page == 1) {
				if (res.data.rows.length == 0) {
					data.noticeHooks = true
				}
				data.barcodeList = rows
				data.arrList = data.barcodeList
			} else {
				let arr = res.data.rows
				data.barcodeList = [...data.barcodeList, ...arr]
				data.arrList = data.barcodeList
			}
			data.noticeHooks = data.barcodeList.length >= res.data.total
		} else {
			uni.showToast({
				title: res.message,
				icon: "none"
			});
		}
	})
	data.noticeHooks=true
	data.arrList = [] //过滤后的数组
	//筛选条件
	let filter = {
		materialCode: data.materialCode,
		materialName: data.materialName,
		processCode: data.processCode
	}


	//拿到有值的参数
	let tempFilter = {};
	for (var key in filter) {
		if (typeof (filter[key]) != "undefined" && typeof (filter[key]) != "null" && filter[key] != null && filter[
			key] != "" && filter[key] != '全部' && filter[key] != 'all' && filter[key] != 'All' && filter[key] != 'ALL') {
			tempFilter[key] = filter[key];
		}
	}

	let resultArr = data.barcodeList.filter(
		(item) => {
			let flag = false;
			if (JSON.stringify(tempFilter) != '{}') {
				for (key in tempFilter) {
					if (item[key] != null && item[key].toString().indexOf(tempFilter[key].toString()) >= 0) {
						flag = true;
					} else {
						flag = false;
						break;
					}
				}
				if (flag) {
					return item;
				}
			}
			else {
				return item;
			}

		}
	);
	data.arrList = resultArr
	console.log(resultArr)
}

const reset = () => {
	data.materialCode = ""
	data.materialName = ""
	data.processCode = ""
	data.barcode = ""
	data.chooseTime = []
	search()
}

const getTime = (times) => {
	data.chooseTime = times;
}
const dateChoose = () => {
	calendarCustomRef.value.open();
}
</script>

<style lang="scss" scoped>
.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}


.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.navigation_card {
	height: 80rpx;
	padding-top: 20prx;
	width: 50%;
	background-color: #fff;
	padding-right: 10rpx;
	box-sizing: border-box;

}

.scroll {
	flex: 1;
	height: 2rpx;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}
</style>
